<template>
	<view id="app">
		<view class="public firstCard">
			<image src="../../static/title.png" mode="" style="width: 100%; object-fit: cover;">
			</image>
			<view class="tt1 tt">工单处理</view>
			<view class="tt2 tt">·高效</view>
			<view class="tt2 tt">·快速</view>
			<view class="tt2 tt">·精准</view>
		</view>
		<view class="public secondCard">
			<view class="publicTitle">|工单统计</view>
			<view class="publicBody publicBody1">
				<text>
					<text class="publicBodyText publicBody1Text">10</text>
					<text class="publicBodyText ">今日工单</text>
				</text>
				<text>
					<text class="publicBodyText publicBody1Text">3</text>
					<text class="publicBodyText">未完成</text>
				</text>
				<text>
					<text class="publicBodyText publicBody1Text">200</text>
					<text class="publicBodyText">已完成</text>
				</text>
			</view>
		</view>
		<view class="public thirdCard">
			<view class="publicTitle">|客户工单</view>
			<view class="publicBody publicBody2">
				<view>
					<!-- <image src="../../static/sb.png" mode=""></image> -->
					<view class="publicBodyText">
						<view class="images" @click="chooseType(0)">
							<view class="img" style="background-color: rgba(0, 0, 0, 1); ">
								<image src="../../static/adt.png" mode="aspectFit">
								</image>
							</view>
							<view>adidas</view>
						</view>
						<view class="images" @click="chooseType(4)">
							<view class="img" style="background-color: rgba(255, 179, 63, 1); ">
								<image src="../../static/pdt.png" mode="aspectFit">
								</image>
							</view>
							<view>pandora</view>
						</view>
					</view>
				</view>
				<view class="publicBodyText" >
					<view class="imagesb" @click="chooseType(3)">
						<image src="../../static/sb.png" mode="aspectFit"
							style="background-color: rgba(255, 179, 63, 1); ">
						</image>
						<view>Starbucks</view>
					</view>
					<view class="images" @click="chooseType(2)">
						<view class="img" style="background-color: rgba(200, 46, 121, 1); ">
							<image src="../../static/rgt.png" mode="aspectFit">
							</image>
						</view>
						<view>Richemont</view>
					</view>
				</view>
				<view class="publicBodyText">
					<view class="images" @click="chooseType(1)">
						<view class="img" style="background-color:rgba(68, 200, 253, 1) ; ">
							<image src="../../static/lvt.png" mode="aspectFit">
							</image>
						</view>
						<view>LVMH</view>
					</view>
					<view class="images" @click="chooseType(5)">
						<view class="img" style="background-color:rgba(40, 168, 164, 1) ;">
							<image src="../../static/ott.png" mode="aspectFit">
							</image>
						</view>
						<view>Other</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar value="0"></tabbar>
	</view>
</template>

<script>
	export default {
		// 阿迪 0 lv 1 历峰 2 星巴克 3 潘多拉 4 其他 5
		onLoad: async function() {
			await this.$store.dispatch("getinfo");
			await this.$store.dispatch("mafa/setRepairType")
		},
		methods: {
			chooseType(index) {
				let thatWay = null;
				switch (index) {
					case 0:
						thatWay = 'ad/admain';
						break;
					case 1:
						thatWay = 'lv/lvmain';
						break;
					case 2:
						thatWay = 'rg/rgmain';
						break;
					case 3:
						thatWay = 'sb/sbmain';
						break;
					case 4:
						thatWay = 'pd/pdmain';
						break;
					case 5:
						thatWay = 'ot/otmain';
						break;
				}
				uni.navigateTo({
					url: thatWay
				})
			}
		}
	}
</script>

<style lang="scss">
	.public {
		// background-color: skyblue;
		// width: 90%;
		position: relative;
		margin: 10px;
		width: 97vw;
		overflow: hidden;

		.publicTitle {
			background-color: white;
			font-size: large;
			font-family: 宋体;
			font-weight: bolder;
			color: blue;
		}

		.publicBody {
			width: 98vw;
			border: 1px solid blue;
			border-radius: 10px;
			display: flex;
			justify-content: space-around;

			.publicBodyText {
				display: block;
				text-align: center;
				margin: 20px;

				.imagesb {
					margin-bottom: 5px;
					position: relative;
					bottom: 5px;

					image {
						width: 8vh;
						height: 8vh;
					}
				}

				.images {
					margin-bottom: 10px;

					.img {
						box-sizing: border-box;
						margin: auto;
						width: 8vh;
						height: 8vh;
						border-radius: 50%;
						overflow: auto;

						image {
							line-height: 6vh;
							height: 7vh;
							width: 7vh;
						}
					}
				}
			}
		}
	}

	.firstCard {
		height: 38vh;
		overflow-y: hidden;

		.tt {
			position: relative;
			bottom: 30vh;
			left: 10vw;
		}

		.tt1 {
			font-size: x-large;
			font-family: 楷体;
			font-weight: bolder;
			color: blue;
		}

		.tt2 {
			margin: 5px 0;
			font-size: large;
			font-family: 楷体;
			font-weight: bolder;
			color: blue;
		}
	}

	.secondCard {
		height: 20vh;

		.publicBody1 {
			height: 16vh;
			width: 95vw;

			.publicBody1Text {
				font-size: x-large;
				color: #0b70bd;
			}
		}


	}

	.thirdCard {
		height: 45vh;

		.publicBody {
			height: 30vh;
			width: 95vw;
		}

	}
</style>
